<template>
  <el-dialog :visible.sync="innerVisible" width="400px"  center>
    <el-row>
      <el-col :span="20" :offset="4" style="font-size:20px;font-weight:700;">{{detailData.runningNo}}</el-col>
      <el-col :span="18" :offset="6"  style="margin-bottom:20px;">{{detailData.foundtime | unixTimestampFilter}}</el-col>

      <el-col :span="24">
        <table class="table">
          <tbody>
          <tr>
            <td>类型:</td>
            <td>{{detailData.runningTypeCode| filterDataBaseDictionary}}</td>
          </tr>
          <tr>
            <td>对方账户:</td>
            <td>{{detailData.tradingObjectName}}:{{detailData.tradingObjectNum}}</td>
          </tr>
          <tr>
            <td width="25%">金额:</td>
            <td width="70%" style="font-size:20px;font-weight:700;">{{(detailData.in_out == 2) ? '-' : '+'}}{{detailData.money}}</td>
          </tr>
          <tr>
            <td >手续费:</td>
            <td v-if="detailData.serviceFee">-{{detailData.serviceFee}}</td>
            <td v-else>无</td>
          </tr>
          <tr>
            <td >方式:</td>
            <td>{{detailData.way}}</td>
          </tr>
          <tr>
            <td>状态:</td>
            <td>{{detailData.typeMemo}}</td>
          </tr>
          <tr>
            <td >关联单号:</td>
            <td >{{detailData.outNo}}</td>
          </tr>
          <tr>
            <td >备注：</td>
            <td>{{detailData.memo}}</td>
          </tr>
          </tbody>
        </table>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import {unixTimestampFilter, filterDataBaseDictionary} from '@/filters'
import {dotData} from '@/utils'

export default{
  components: {
  },
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  props: {
    currentId: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      innerVisible: false,
      detailData: {}
    }
  },
  created() {
    // this.$nextTick(_ => {
    //   this.getDetail()
    // })
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.innerVisible = val
      console.log('watch里面的 id', this.currentId)
      if (val) {
        this.$nextTick(_ => {
          this.getDetail()
        })
      }
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  computed: {
    // runingId () {
    //   return dotData(this.currentData, 'runingId')
    // }
  },
  methods: {
    // show () {
    //   this.$nextTick(_ => {
    //     this.$refs.modalFrame.show()
    //     console.log('333', this.currentId)
    //     this.getDetail()
    //   })
    // },
    hide() {
      this.innerVisible = false
    },
    getDetail() {
      console.log('请求详情 id', this.currentId)
      this.$ajax.get('/ms-user-wallet/wallet/wallet-bill-running-log-details', {runningId: this.currentId}).then(response => {
        dotData(response, 'success')
        if (dotData(response, 'success')) {
          this.detailData = dotData(response, 'data')
          console.log('单条流水的详情信息......', this.detailData)
        }
      })
    }
  }
}
</script>
